<template>
  <div class="title">
    <div class="search">
      <a-input-search placeholder="搜素日程" style="width: 280px" @search="onSearch" />
      <div class="butt" @click="showAdd">
        <span>
          +
        </span>
      </div>
    </div>
    <div class="c-header">
      <span style="font-size:14px; font-weight:400">{{value}}</span>
      <div>
        <a @click="delet" class="box">
          <a-icon type="left" />
        </a>
        <a @click="add" class="box">
          <a-icon type="right" />
        </a>
      </div>

    </div>
    <div class="calendar">
      <a-calendar :locale="locale" :fullscreen="false" :header-render="headerRender" @change="onChange" />
    </div>
    <!--     <div :style="{ width: '320px'}">
      <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
    </div> -->
    <Add v-model="visible" />
  </div>

</template>
<script>
import moment from 'moment'
import Add from '@/views/components/add.vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

export default {
  data () {
    return {
      value: '',
      visible: false,
      locale: zhCN
    }
  },
  components: {
    Add
  },
  created () {
    let day = new Date()
    this.value = day && moment().format('YYYY年MM月')
  },
  methods: {
    onSearch () { },
    showAdd () {
      this.visible = !this.visible
    },
    onPanelChange (value, mode) {
      console.log(value, mode)
    },
    onChange (date) {
      let value = date && moment().format('YYYY年MM月DD日')
      this.value = value
      console.log(value)
    },
    headerRender ({ value, type, onChange, onTypeChange }) {
      return (
        <div >
        </div>
      )
    },
    delet () {

    },
    add () {

    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  width: 320px;
  margin-top: 20px;
  margin-bottom: 10px;
  .search {
    display: flex;
    justify-content: space-between;
    .butt {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      background-color: #1890ff;
      font-size: 28px;
      font-weight: bolder;
      line-height: 30px;
      vertical-align: middle;
      text-align: center;
      color: aliceblue;
      margin-left: 10px;
    }
  }
  .c-header {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .box {
      // font-weight: bold;
      line-height: 30px;
      color: #333;
      width: 30px;
      height: 30px;
      display: inline-block;
      margin-left: 6px;
      padding-left: 8px;
    }
    .box:hover {
      width: 30px;
      height: 30px;
      background-color: rgba(192, 192, 192, 0.493);
      border-radius: 4px;
    }
  }
  .calendar {
    width: 320px;
    .ant-fullcalendar {
      border: none;
    }
  }
}
</style>
